.component {
  --size: 30px;

  display: grid;
  place-items: center;
  color: var(--greyscale-text-negative);
  text-transform: uppercase;
  background-color: var(--primary-surface-default);
  border-radius: var(--radius-full);
}

.size-small {
  width: var(--size);
  height: var(--size);
  font-size: 12px;
}

.size-medium {
  width: var(--gap-3xl);
  height: var(--gap-3xl);
}

.size-big {
  width: calc(var(--gap-3xl) * 2);
  height: calc(var(--gap-3xl) * 2);
  padding: 3px;
}

.size-xl {
  width: 80px;
  height: 80px;
  padding: 3px;
  font: var(--font-h3-regular);
}
